<template>
  <div class="container">
    <div class="header">
      <span style="font-size:20px;font-weight:bold">兴趣标签</span>
      <span style="font-size:14px;color:#949494">
        请您选择感兴趣和不感兴趣的技术领域，Weiy会根据您的标签帮您找到 <span style="color:#277ccc">更适合您的内容</span>
      </span>
    </div>
    <div class="main">
      <div class="tip">
        <span style="color:#555666">感兴趣</span>
      </div>
      <div class="content">
        <div class="interest-tag">
          <tiny-tag
              class="i-tag"
              color="#ebf2f7"
              closable
              v-for="interest in interestTagList"
              :key="interest.id"
              @close="handleCloseInterestTag(interest.id)"
          >
            {{interest.name}}
          </tiny-tag>
        </div>
        <div class="tag-list">
          <div class="parent">
            <span
                class="p-tag"
                v-for="parent in parentTagList"
                :key="parent.id"
                @click="chooseParentTag(parent.id)"
            >
              {{parent.name}}
            </span>
          </div>
          <div class="children">
            <tiny-tag
                class="c-tag"
                color="#ebf2f7"
                v-for="child in childrenTagList"
                :key="child.id"
                @click="chooseInterestTag(child.id,child.name)"
            >
              {{child.name}}
            </tiny-tag>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <tiny-button type="primary" @click="saveTag">保存修改</tiny-button>
    </div>
  </div>
</template>

<script setup>
import {Modal, Tag as TinyTag, Button as TinyButton} from '@opentiny/vue'
import request from "../utils/request.js";
import {ref} from 'vue'
import {userName} from "../config/index.js";


const parentTagList = ref([])
const childrenTagList = ref([])
const interestTagList = ref([])
const currentUser = localStorage.getItem(userName) ? JSON.parse(localStorage.getItem(userName)) : null


// 保存修改标签
const saveTag = () => {
  if (currentUser){
    const tagIdList = interestTagList.value.map(v => v.id)
    const tmp = {
      userId:currentUser.id,
      tagIdList
    }
    request.post('/api/users/tags',tmp).then(res => {
      if (res.code === 1) {
        Modal.message({message: res.data, status: 'success'})
      } else {
        Modal.message({message: res.message, status: 'error'})
      }
    })
  }
}

// 取消兴趣标签
const handleCloseInterestTag = (tagId) => {
  interestTagList.value = interestTagList.value.filter(v => v.id !== tagId)
}

// 选择兴趣标签
const chooseInterestTag = (childId,childName) => {
  let flag = true
  interestTagList.value.forEach(i => {
    if (i.id === childId){
      flag = false
      return
    }
  })
  if (flag)
    interestTagList.value.push({id:childId,name:childName})
}

// 筛选子标签
const chooseParentTag = (parentId) => {
  childrenTagList.value = parentTagList.value.filter(p => {
    if (p.id === parentId)
      return p
  })[0].children
}

// 查询自己的兴趣标签
const queryInterestTagList = () => {
  if (currentUser !== null){
    request.get(`/api/users/tags/interest/${currentUser.id}`).then(res => {
      if (res.code === 1) {
        interestTagList.value = res.data
      } else {
        Modal.message({message: res.message, status: 'error'})
      }
    })
  }
}
queryInterestTagList()

// 查询标签
const queryTagList = () => {
  request.get('/api/systems/tags/tree').then(res => {
    if (res.code === 1) {
      // 取前29个标签
      parentTagList.value = res.data.slice(0, 29)
      childrenTagList.value = parentTagList.value[0].children
    } else {
      Modal.message({message: res.message, status: 'error'})
    }
  })
}
queryTagList()

</script>

<style lang="less" scoped>

.footer{
  margin-top:25px;
}
.container {
  .main{
    .content{
      .interest-tag{
        .i-tag{
          margin:0 15px 15px 0;
        }
      }
      .tag-list{
        .children{
          .c-tag{
            margin: 0 15px 10px 0;
            cursor:pointer;
          }
          padding-top:5px;
          margin-top:10px;
        }
        .parent{
          .p-tag:hover{
            color:#507999;
          }
          .p-tag{
            display: inline-block;
            margin: 0 15px 10px 0;
            cursor:pointer;
            color:#949494;
          }
          border-bottom: 1px dashed #ddd;
          padding-bottom:5px;
        }
        margin-top:20px;
        padding:10px;
        border: 1px dashed #ddd;
      }
      width:94%;
      margin-left:30px;
    }
    .tip{
      width:6%;
    }
    display: flex;
  }
  .header{
    padding-bottom: 10px;
    margin-bottom:10px;
    border-bottom: 1px solid #ddd;
  }
  width: 70%;
  margin-left: 30px;
}
</style>
